import React, { Component } from "react";
import './index.css'
import { v4 as uuidv4 } from 'uuid';

export default class Header extends Component {

    // 输入框值改变时使用
    inputChange = (event) => {
        this.props.inputStateChange( event.target.value );
    }

    // 输入框按下点击事件时改
    keyUpEnter = ( event ) => {
        if( event.keyCode === 13 && event.target.value !== ''){
            let obj = { id: uuidv4(), todo: event.target.value, done: false }
            this.props.keyUpEnterChange( obj );
            event.target.value = ''
        }
    }


    render() {
        return (
            <div>
                <div className="todo-header">
                    <input onKeyUp={ this.keyUpEnter } onChange={ this.inputChange } type="text" placeholder="请输入你的任务名称，按回车键确认" />
                </div>
            </div>
        );
    }
}
